<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Icon from "@iconify/svelte";
    import Result from "./Result.svelte";
    import Space from "../Space/Space.svelte";
    import Button from "../Button/Button.svelte";
    import { Modal } from "../Modal";

    const { Story } = defineMeta({
        title: "Components/Views/Result",
        component: Result,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
    let visible = $state(false);
</script>

<Story name="Default">
    {#snippet template(args)}
        <Space dir="v">
            <Result title="标题" subTitle="副标题" desc="描述内容"></Result>
            <Result status="success" title="操作成功" subTitle="副标题" desc="描述内容"></Result>
            <Result status="warning" title="警告操作" subTitle="副标题" desc="描述内容"></Result>
            <Result status="error" title="操作错误" subTitle="副标题" desc="描述内容"></Result>
        </Space>
    {/snippet}
</Story>

<Story name="Modal">
    {#snippet template(args)}
        <Button
            type="primary"
            onclick={() => {
                visible = true;
            }}>成功</Button
        >
        <Button
            type="primary"
            onClick={() => {
                modal.open({
                    icon: undefined,
                    footerAlign: 'center',
                    content: <Result status="success" title="操作成功" subTitle="副标题" />
                });
            }}
        >
            成功2
        </Button>
        <Modal bind:visible title="提示">
            <Result status="success" title="操作成功" subTitle="副标题"></Result>
        </Modal>
    {/snippet}
</Story>
